<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js增刪改查5</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            width: 1333px;
        }
        li{
            list-style: none;
            float: left;
            width: 180px;
            border: 1px solid #000;
            text-align: center;
            height: 30px;
            line-height: 30px;
        }
        ul{
            overflow: hidden;
            width:1333px;
        }
       h2{
        text-align: center;
       }
       #userID , #userAge{
        width: 30px;
       }
    </style>
</head>
<body>
    <div class="content">
        <h2>原生js增删改查5</h2>
        编号：<input type="text" id="userID">
        姓名：<input type="text" id="userName" maxlength="5">
        性别：男：<input type="radio" name="sex" value="0" checked>
              女：<input type="radio" name="sex" value="1">
        年龄：<input type="text" id="userAge" maxlength="3">
        电话：<input type="text" id="userPhone" maxlength="11">
        邮箱：<input type="text" id="userEmail" maxlength="11">
        <button onclick="add()">提交</button>
        <input type="reset" onclick="reset()">
    </div>
   
        <div class="center">
            <ul>
                <li>姓名</li>
                <li>性别</li>
                <li>年龄</li>
                <li>电话</li>
                <li>邮箱</li>
                <li>操作</li>
            </ul>
        </div>
    
    <div id="show">
        
    </div>
    <script>
        var data=[{
            id:0,
            name:"汤思洋",
            sex:0,
            age:20,
            phone:"18327614096",
            email:"1278703962@qq.com",
            delete:false,
        },];
        function showtime(){
            var str="";
            show=document.getElementById("show");
            for(var i=0;i<data.length;i++){
                if(data[i].sex==0){
                    data[i].sex="男";
                }else if(data[i].sex==1){
                    data[i].sex="女";
                }
                data[i].id=i;
                str += '<ul>'+
                            '<li>'+data[i].name+'</li>'+
                            '<li>'+data[i].sex+'</li>'+
                            '<li>'+data[i].age+'</li>'+
                            '<li>'+data[i].phone+'</li>'+
                            '<li>'+data[i].email+'</li>'+
                            '<li><a href="#" onclick="del('+i+')">删除</a>||<a href="#" onclick="updata('+i+')">修改</a></li>'+
                        '</ul>'
            }
            show.innerHTML=str;
        }

        function del(i){
            data.splice(i,1);
            showtime();
        }
        var reg_name = /^[\u4e00-\u9fa5]{2,4}$/;
        if(reg_name.test(document.getElementById("userName"))){

        }else{
            
        }
        function add(){
            userID=document.getElementById("userID").value;
            if(!userID){
            userName=document.getElementById("userName").value;
            userAge=document.getElementById("userAge").value;
            userPhone=document.getElementById("userPhone").value;
            userEmail=document.getElementById("userEmail").value;
            var gender;
            userSex=document.getElementsByName("sex");
            for(var i=0;i<userSex.length;i++){
                if(userSex[i].checked==true){
                    gender=userSex[i].value;
                }
            }
            data.push({
                name:userName,
                age:userAge,
                sex:gender,
                phone:userPhone,
                email:userEmail,
            });
            }else{
                data[userID].name=document.getElementById("userName").value;
                data[userID].age=document.getElementById("userAge").value;
                data[userID].phone=document.getElementById("userPhone").value;
                data[userID].email=document.getElementById("userEmail").value;
                var gender;
                userSex=document.getElementsByName("sex");
                for(var i = 0;i<userSex.length;i++){
                    if(userSex[i].checked==true){
                        gender=userSex[i].value;
                    }
                }
                data[userID].sex=gender;
                // console.log(data);
            }

           showtime(); 
        }

        function updata(i){
            document.getElementById("userID").value=data[i].id;
            document.getElementById("userName").value=data[i].name;
            document.getElementById("userAge").value=data[i].age;
            document.getElementById("userPhone").value=data[i].phone;
            document.getElementById("userEmail").value=data[i].email;
            if(data[i].sex=="男"){
                document.getElementsByName("sex")[0].checked==true;
            }else if(data[i].sex=="女"){
                document.getElementsByName("sex")[1].checked==true;
            }
            showtime();
        }
        function reset(){
            document.getElementById("userID").value="";
            document.getElementById("userName").value="";
            document.getElementById("userPhone").value="";
            document.getElementById("userEmail").value="";
        }
        showtime();

    </script>
</body>
</html>